<template>
  <div>
    <div class="bg-white flex">
      <LayoutBreadcrumb class="grow" />
    </div>

    <div class="mt-2 bg-white px-4 pt-4 pb-12" style="height: calc(100vh - 105px)">
      <!-- <div class="space-x-2 flex">
        <a-button type="primary" :disabled="disableAddDtu" @click="addDtu">添加DTU</a-button>
        <a-button type="primary">编辑</a-button>
        <a-button type="primary">删除</a-button>
        <a-button type="primary">添加子节点</a-button>
      </div> -->
      <this-network ref="nwRef" @on-add="showAddForm" @on-edit="showEditForm" @delete="onDelete" />
    </div>

    <modal-dtu ref="dtuM" @added="createDtu" @edited="updateDtu" />
    <modal-hub ref="hubM" @added="createHub" @edited="updateHub" />
    <modal-sen ref="senM" @added="createSensor" @edited="updateSensor" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { LayoutBreadcrumb } from '../../../layouts/default/header/components';
import thisNetwork from './network.vue';
import modalDtu from './modal/dtu.vue';
import modalHub from './modal/hub.vue';
import modalSen from './modal/sensor.vue';
import { useRoute } from 'vue-router';
import { defHttp } from '/@/utils/http/axios';
import { message } from 'ant-design-vue';
export default defineComponent({
  components: { LayoutBreadcrumb, thisNetwork, modalDtu, modalHub, modalSen,message },
  setup() {
    const nwRef = ref();
    const dtuM = ref();
    const hubM = ref();
    const senM = ref();

    // let count_dtu = ref(0);

    const $route = useRoute();
    const project_id = 1 * $route.params.id;
    // console.log($route.params);

    const showAddForm = (node) => {
      // const level = node['$$level'];
      const level = node.level;
      if (level === 0) {
        return dtuM.value.open({ pid: node.id });
      }
      if (level === 1) {
        if(node.typeId==6){
          return dtuM.value.open({ pid: node.id });
        }
        return hubM.value.open({ pid: node.id });
      }
      if (level === 2) {
        return senM.value.open({ pid: node.id, dtuId: node.pid });
      }
    };

    const showEditForm = (node) => {
      const level = node.level;
      console.log(node, 33333);
      if (level === 1) {
        return dtuM.value.open(node);
      }
      if (level === 2) {
        if(node.typeId==7){
          node.type =node.typeId;
          node.mode = node.tranModeId;
          node.gap = node.gatherInterval;
          node.enable = node.status==0 ? false:true;
          node.remark = node.comment;
          return dtuM.value.open(node);
        }
        return hubM.value.open(node);
      }
      if (level === 3) {
        return senM.value.open(node);
      }
    };

    const updateDtu = (node) => {
      defHttp
        .post({
          url: '/dtu/update',
          params: {
            id: node.id,
            no: node.code,
            name: node.name,
            projectId: project_id,
            typeId: node.type,
            tranModeId: node.mode,
            gatherInterval: node.gap,
            comment: node.remark,
            serialNo: node.serialNo,
            status: node.enable?1:0,
          },
        })
        .then((res) => {
          getTopo();
        });
    };

    const updateHub = (node) => {
      defHttp
        .post({
          url: '/gather-device/update',
          params: {
            id: node.id,
            projectId: project_id,
            dtuId: node.pid,
            no: node.code,
            name: node.name,
            gatherDeviceTypeId: node.type,
            address: node.address,
            companyId: 1 * node.producer,
          },
        })
        .then((res) => {
          if(!res.rst){
            message.error(res.data);
          }
          getTopo();
        });
    };

    const updateSensor = (node) => {
      console.log(node);
      defHttp
        .post({
          url: '/sensor/update',
          params: {
            id: node.id,
            projectId: project_id,
            no: node.no,
            address: node.address,
            gatherDeviceId: node.gatherDeviceId,
            name: node.name,
            typeId: node.typeId,
            dtuId:node.dtuId,
            channel:node.channel,
            comment:node.comment,
            companyId: 1 * node.producer,
          },
        })
        .then((res) => {
          if(!res.rst){
            message.error(res.data);
          }
          getTopo();
        });
    };

    function createDtu(form) {
      defHttp
        .post({
          url: '/dtu/add',
          params: {
            no: form.code,
            name: form.name,
            projectId: project_id,
            typeId: form.type,
            tranModeId: form.mode,
            gatherInterval: form.gap,
            comment: form.remark,
            serialNo: '' + form.id,
            pid:form.pid
          },
        })
        .then((res) => {
          getTopo();
        });
    }

    function createHub(form) {
      defHttp
        .post({
          url: '/gather-device/add',
          params: {
            projectId: project_id,
            dtuId: form.pid,
            no: form.code,
            name: form.name,
            gatherDeviceTypeId: form.type,
            address: form.address,
            companyId: 1 * form.producer,
          },
        })
        .then((res) => {
          if(!res.rst){
            message.error(res.data);
          }
          getTopo();
        });
    }

    function createSensor(form) {
      defHttp
        .post({
          url: '/sensor/add',
          params: {
            projectId: project_id,
            channel: form.channel,
            no: form.code,
            address: form.position,
            typeId: form.type,
            companyId: 1 * form.producer,
            para: form.params,
            gatherDeviceId: form.pid,
            dtuId: form.dtuId,
            pic: '',
            comment: '',
            name: '',
          },
        })
        .then((res) => {
          if(!res.rst){
            message.error(res.data);
          }
          getTopo();
        });
    }

    function onDelete(node) {
      let device = ['dtu', 'gather-device', 'sensor'][node.$$level - 1];
      defHttp.post({ url: `/${device}/delete`, params: { id: node.id } }).then((res) => {
        getTopo();
      });
    }

    function getTopo() {
      defHttp.get({ url: `/project/get-sensor-topo?id=${project_id}` }).then((res) => {
        const { id, name, dtuTopoList } = res.data;
        let tree = dtuTopoList.map((item) => {
          item.level = 1;
          item.label = item.name;
          if(item.gatherDeviceList){
            item.children = item.gatherDeviceList.map((item2) => {
              item2.level = 2;
              item2.label = item2.name;

              item2.children = item2.sensorList.map((item3) => {
                item3.level = 3;
                item3.label = item3.no;
                return {
                  ...item3,
                  producer: '' + item2.companyId,
                };
              });


              // forms.value.push(item2);
              return {
                ...item2,
                pid: item2.dtuId,
                code: item2.no,
                name: item2.name,
                type: item2.gatherDeviceTypeId,
                address: item2.address,
                producer: '' + item2.companyId,
              };
            });

            return {
              ...item,
              code: item.no,
              name: item.name,
              type: item.typeId,
              mode: item.tranModeId,
              gap: item.gatherInterval,
              remark: item.comment,
              enable: true,
            };
          }
          if(item.gnssList){
            item.children = item.gnssList.map((item2) => {
              item2.level = 2;
              item2.label = item2.name;

              item2.children =[];

              // forms.value.push(item2);
              return {
                ...item2,
                pid: item2.dtuId,
                code: item2.no,
                name: item2.name,
                type: item2.gatherDeviceTypeId,
                address: item2.address,
                producer: '' + item2.companyId,
              };
            });

            return {
              ...item,
              code: item.no,
              name: item.name,
              type: item.typeId,
              mode: item.tranModeId,
              gap: item.gatherInterval,
              remark: item.comment,
              enable: true,
            };
          }

        });
        nwRef.value.setProject({
          id,
          label: name,
          children: tree,
          level: 0,
        });
      });
    }

    getTopo();

    return {
      nwRef,
      dtuM,
      hubM,
      senM,
      showAddForm,
      showEditForm,
      onDelete,
      updateDtu,
      updateHub,
      updateSensor,
      createDtu,
      createHub,
      createSensor,
    };
  },
});
</script>
